import {Component, OnInit, OnChanges, Input, SimpleChanges} from '@angular/core';
import {NzMessageService} from 'ng-zorro-antd';
declare var $: any;
@Component({
    selector: 'app-img-com',
    templateUrl: './img-com.component.html',
    styleUrls: ['./img-com.component.scss']
})
/**
 * @author csw
 * @description:预约-查看图片业务组件
 * @date 2021-01-28 15:11:50
 */
export class ImgComComponent implements OnInit, OnChanges {
    @Input() imgListData: any;
    imgList: any[] = [];
  // 现场图片点击放大查看
  imgClickOpenShow: boolean;
  // 轮播左侧点击次数
  nexImg = 0;
  // 图片数组长度
  imgLen: number;
    constructor(private message: NzMessageService) {
    }

    ngOnInit() {
      this.imgClickOpenShow = false;
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.imgListData) {
            this.imgList = changes.imgListData.currentValue;
        }
    }
  /**
   * 图片点击显示弹窗放大
   */
  openPlusClick(): void {
    this.nexImg = 0;
    this.imgClickOpenShow = true;
    this.imgLen = this.imgList.length;
  }
  changeFn(): void {
    this.imgClickOpenShow = false;
    this.nexImg = 0;
  }
  /**
   * 轮播左边滑动
   */
  preFn(): any {
    $('.right-icon').fadeIn('slow');
    if (this.nexImg >= (this.imgLen - 1)) {
      $('.left-icon').fadeOut('slow');
      return false;
    }
    this.nexImg++;
    $('.imgContent').animate({
      left: -480 * this.nexImg
    }, 'slow');
  }
  /**
   * 轮播右边滑动
   */
  nextFn(): any {
   $('.left-icon').fadeIn('slow');
   if (this.nexImg <= 0) {
      this.nexImg = 0;
      $('.right-icon').fadeOut('slow');
      return false;
    }
   this.nexImg--;
   $('.imgContent').animate({
      left: -480 * this.nexImg
    }, 'slow');

  }
  /**
   * 图片放大点击取消时间
   */
  cancelClick(): void {
    this.imgClickOpenShow = false;
    this.nexImg = 0;
  }
}
